<template>
  <div class="page-container">

    <a-card style="width: 100%">
      <template #title>
        <ArrowLeftOutlined @click="router.back()" style="margin-right: 10px" />
        设备详情
      </template>
      <a-descriptions>
        <a-descriptions-item label="设备ID">{{deviceId}}</a-descriptions-item>
        <a-descriptions-item label="设备名称">{{deviceDetail.deviceName || ''}}</a-descriptions-item>
        <a-descriptions-item label="设备型号">{{deviceDetail.productId || ''}}</a-descriptions-item>
        <a-descriptions-item label="设备VIN">{{deviceDetail.deviceVin || ''}}</a-descriptions-item>
        <a-descriptions-item label="客户端ID">{{deviceDetail.deviceClientId || ''}}</a-descriptions-item>
        <a-descriptions-item label="客户端类型">{{deviceDetail.deviceClientType || ''}}</a-descriptions-item>
        <a-descriptions-item label="客户端版本">{{deviceDetail.deviceClientVersion || ''}}</a-descriptions-item>
        <a-descriptions-item label="操作系统">{{deviceDetail.deviceOs || ''}}</a-descriptions-item>
        <a-descriptions-item label="操作系统版本">{{deviceDetail.deviceClientId || ''}}</a-descriptions-item>
        <a-descriptions-item label="归属用户">{{deviceDetail.userId || ''}}</a-descriptions-item>
        <a-descriptions-item label="归属项目">{{deviceDetail.projectId || ''}}</a-descriptions-item>
        <a-descriptions-item label="归属部门">{{deviceDetail.departmentId || ''}}</a-descriptions-item>
        <a-descriptions-item label="在线状态">{{deviceDetail.deviceConnectionStatus === 1 ? '在线' : '离线' }}</a-descriptions-item>
        <a-descriptions-item label="IP地址">{{deviceDetail.deviceIp || '' }}</a-descriptions-item>
        <a-descriptions-item label="Mac地址">{{deviceDetail.deviceMac || '' }}</a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card style="width: 100%; margin: 12px 0 12px 0; min-height: calc(100vh - 300px);">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="messages" tab="消息日志">
          <a-table :columns="messageLogColumns" :data-source="messageLog.records" bordered
                    :loading="loading"
                   @resizeColumn="handleResizeColumn"
                   style="width: 100%;" :scroll="{ x: 1000, y: 480 }"
                   :pagination="{defaultCurrent: 1, defaultPageSize: 10, showSizeChanger: true,onChange: onDeviceMessageLogChange, showQuickJumper: true, total: messageLog.total, showTotal: (total:number) => `共${total}条`}">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'id' ">
                {{ record.id || ' -' }}
              </template>
              <template v-if="column.dataIndex === 'deviceId'">
                {{ record.deviceId || ' -' }}
              </template>
              <template v-if="column.dataIndex === 'deviceCommandParam'">
                {{ record.deviceCommandParam || ' -' }}
              </template>
              <template v-if="column.dataIndex === 'deviceCommandResponse'">
                {{ record.deviceCommandResponse || ' -' }}
              </template>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="loginLogs" tab="登录日志" force-render>Content of Tab Pane 2</a-tab-pane>
        <a-tab-pane key="result" tab="结果日志">Content of Tab Pane 3</a-tab-pane>
      </a-tabs>

    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { onActivated, ref } from 'vue'
import { devicesApi } from '@/api/devices'
import { useRoute } from 'vue-router'
import notification from 'ant-design-vue/es/notification'
import router from '@/router'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'

const route = useRoute()
const loading = ref<boolean>(false)

const deviceId = route.params.id
const activeKey = ref<string>('messages')
const deviceDetail = ref<any>({})

const getDeviceDetail = async () => {
  loading.value = true
  const res = await devicesApi.getDevice({ id: deviceId })

  console.log(res);
  if (res?.code === 200) {
    deviceDetail.value = res.data
  } else {
    notification.error({ message: res?.message || '获取数据失败'});
  }

  loading.value = false
  return res
}

const messageLog = ref<any>({
  records: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
  pages: 0
})

const messageLogColumns = [
  {
    dataIndex: 'id',
    key: 'messageId',
    title: 'messageId',
    width: 200,
  },
  {
    dataIndex: 'deviceId',
    key: 'deviceId',
    title: '设备ID',
    width: 200
  },
  {
    key: 'requestId',
    dataIndex: 'requestId',
    title: '请求ID',
    width: 300
  },
  {
    title: '命令',
    width: 200,
    dataIndex: 'deviceCommand',
    key: 'deviceCommand',
  },
  {
    title: '命令参数',
    dataIndex: 'deviceCommandParam',
    key: 'deviceCommandParam',
    width: 300,
    resizable: true,
  },
  {
    title: '命令响应',
    dataIndex: 'deviceCommandResponse',
    key: 'deviceCommandResponse',
    width: 300,
    resizable: true,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 150,
  },
  {
    key: 'createdTime',
    dataIndex: 'createdTime',
    title: '创建时间',
    width: 200
  },
  {
    key: 'updatedTime',
    dataIndex: 'updatedTime',
    title: '更新时间',
    width: 200
  },
  {
    key: 'createdUserId',
    dataIndex: 'createdUserId',
    title: '创建时间',
    width: 160
  },
]


const onDeviceMessageLogChange = (pageNum: number, pageSize: number) => {
  messageLog.value.pageNum = pageNum;
  messageLog.value.pageSize = pageSize;
  getDeviceMessageLog();
}

function handleResizeColumn(w, col) {
  col.width = w;
}

const getDeviceMessageLog = async () => {
  loading.value = true
  const res = await devicesApi.getDeviceMessageLog({ pageNum: messageLog.value.pageNum, pageSize: messageLog.value.pageSize, deviceId: deviceId })
  console.log('res', res);
  if (res?.code === 200) {
    messageLog.value = res.data;
  } else {
    notification.error({ message: res?.errors || res?.message || '获取数据失败'});
  }
  loading.value = false
}

onActivated(() => {
  getDeviceDetail()
  getDeviceMessageLog()
})



</script>

<style scoped lang="less">
.page-container {

}
</style>
